import React from "react";
import {Link} from "react-router";
import {Table, Card, Menu, Dropdown, Icon, Modal, message, Button, Row, Col} from 'antd';
import BreadcrumbCustom from "../BreadcrumbCustom";
import App from "../../common/App.jsx";
import U from "../../utils";
import "../../assets/css/users/users.less";

const URL = {
    list: 'adm/sample/list',
    remove: 'adm/sample/remove',
    key: 'sampleId',
     edit: 'app/sample/edit/',
    add: 'app/sample/edit/0',
    first: '案例',
    second: '案例列表',
};
export default class Samples extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            dataSource: [],
            pagination: {pageSize: 10, current: U.page.getCurrentPage(), total: 0},
            columns: [
                {
                    title: "标题",
                    dataIndex: "title",
                    key: "title",
                    render: (col, row, i) => i + 1
                },
                {
                    title: "简介",
                    dataIndex: "intro",
                    key: "intro"
                },
                {
                    title: "图片",
                    dataIndex: "img",
                    key: "img",
                    render: (img) => <img src={img} style={{width: 40, maxHeight: 40}} alt=""/>
                }, {
                    title: "创建时间",
                    dataIndex: "createdAt",
                    key: "createdAt",
                    render: (createdAt) => <span>{U.date.format(new Date(createdAt), 'yyyy-MM-dd HH:mm:ss')}</span>
                },
                {
                    title: "操作",
                    dataIndex: "option",
                    key: "option",
                    width: 200,
                    render: (col, record, i) => (
                        <Dropdown overlay={<Menu>
                            <Menu.Item key="0">
                                <a href="javascript:;" onClick={() => {
                                    URL.edit && App.go(URL.edit + record.id)
                                }}>编辑</a>
                            </Menu.Item>
                            <Menu.Item key="1">
                                <a href="javascript:;" onClick={() => {
                                    Modal.confirm({
                                        title: '删除',
                                        onOk: () => {
                                            App.api(URL.remove, {
                                                [URL.key]: record.id,
                                            }).then(() => {
                                                message.success('删除成功');
                                                this.loadData();
                                            })
                                        }
                                    })
                                }}>删除</a>
                            </Menu.Item>
                        </Menu>} trigger={['click']}>
                            <a className="ant-dropdown-link" href="javascript:;">
                                操作 <Icon type="down"/>
                            </a>
                        </Dropdown>
                    )
                }
            ]
        };
    }


    componentDidMount() {
        this.loadData();
    }


    loadData = () => {
        let _this = this;
        _this.setState({loading: true});
        let p = _this.state.pagination;
        App.api(URL.list, {
            countTotal: true,
            offset: (this.state.pagination.current - 1) * (this.state.pagination.pageSize),
            limit: p.pageSize
        }).then(function (result) {
            let pager = U.pager.convertOffset2Page(result);
            pager.current = p.current;
            _this.setState({
                dataSource: result.items,
                pagination: pager,
                loading: false
            });
        });
    };


    handleTableChange = (pagination) => {
        this.setState({
            pagination: pagination
        }, () => this.loadData());
    };

    render() {
        const {columns, dataSource, pagination:{total, pageSize, offset, current}} = this.state;

        const pagination = {
            total: total,
            current: ~~offset / 10 + 1,
            pageSize: pageSize,
            showSizeChanger: true
        };
        return (
            <div>
                <BreadcrumbCustom first={URL.first} second={URL.second}/>
                <Row style={{margin: "10px 0"}}>
                    <Col span={2} offset={22}>
                        <Button
                            size={"large"}
                            type={"primary"}
                            onClick={() => {
                                this.props.router.push(URL.add);
                            }}
                        >
                            添加
                        </Button>
                    </Col>
                </Row>
                <Card>
                    <Table
                        rowKey={row => row.id}
                        columns={columns}
                        dataSource={dataSource}
                        pagination={pagination}
                        onChange={this.handleTableChange}
                        loading={this.state.loading}
                        scroll={{
                            x: columns
                                .map(({width}) => width || 100)
                                .reduce((l, f) => l + f)
                        }}
                    />
                </Card>
            </div>
        );
    }
}
